<template>
	<div class="barrages-drop">
		<vue-baberrage :isShow="barrageIsShow" :barrageList="barrageList" :maxWordCount="maxWordCount"
			:throttleGap="throttleGap" :loop="barrageLoop" :boxHeight="boxHeight" :messageHeight="messageHeight"
			:lanesCount="lanesCount">
		</vue-baberrage>
	</div>
</template>
<script>
import Vue from 'vue';
import { vueBaberrage, MESSAGE_TYPE } from 'vue-baberrage';
Vue.use(vueBaberrage);
export default {
	props: ['List'],
	name: 'Barrages',
	data() {
		return {
			barrageIsShow: true,  //显示
			messageHeight: 40,  //消息高度
			boxHeight: 400,  //高度
			barrageLoop: true,  //循环播放
			maxWordCount: 30,   //最大字数
			throttleGap: 5000,  //消息间隔
			lanesCount: 6,  //甬道数量
			barrageList: [],  //弹幕展示数据
			list: []
		};
	},
	mounted() {
		this.list = this.$props.List
		this.addToList();
	},
	methods: {
		addToList() {
			this.list.forEach((v) => {
				this.barrageList.push({
					msg: v,
					time: Math.random() * 9 + 15,  //弹幕速度
					type: MESSAGE_TYPE.NORMAL,
				});
			});
		}
	}
};
</script>
<style lang="less">
.barrages-drop {
	.bg {
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333 !important;
	}

	.baberrage-stage {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: hidden;
		top: 0;
	}

	.baberrage-avatar {
		display: none;
	}

	.baberrage-item .normal {
		background: none;
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333 !important;
	}
}
</style>